'use strict';

var React = require('react/addons');
var Router = require('react-router');
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;



var UserinfoComponent = React.createClass({
  getInitialState : function(){
    return {
        userSwitch : true,
        isopen : false
    };
  },
  handleOpen : function(){
    var off = !this.state.isopen;
    this.setState({isopen : off});
  },
  handleOpenState : function(){

    this.setState({ userSwitch : true });
    this.handleOpen();
  },
  handleCloseState : function (){
    this.setState({ userSwitch : false });
    this.handleOpen();
  },
  render: function() {
    var statusToggle;
    if(this.state.userSwitch){
        statusToggle = <a href="javascript:;" className="do-user-status-toggle" onClick={this.handleOpen}><span className="do-icon-msg do-user-status-open"></span> 开始接诊 <i className="fa fa-sort-down"></i></a>;
    }else{
        statusToggle = <a href="javascript:;" className="do-user-status-toggle" onClick={this.handleOpen}><span className="do-icon-msg-down do-user-status-close"></span> 停止诊室 <i className="fa fa-sort-down"></i></a>;
    }

    var cx = React.addons.classSet;
    var classes = cx({
      'do-user-status-dropmenu': true,
      'do-user-status-dropmenu-open' : true
    });

    var dropdownMenu = this.state.isopen ? <ul className={ classes } >
                              <li onClick={ this.handleOpenState }><span className="do-icon-msg do-user-status-open"></span> 开始接诊</li>  
                              <li onClick={ this.handleCloseState } ><span className="do-icon-msg-down do-user-status-close"></span> 停止诊室</li>
                        </ul> : [];
 

    return (
      /* jshint ignore:start */
	<div className="do-box-user">
		<div className="do-box-userinfo">
			<div className="do-box-user-icon">
				<img src="/images/test-user-icon.jpg" alt="用户头像" className="circle-img" width="40px" height="40px" />
			</div>
			<div className="do-box-user-name">张小胡</div>
            <div className="do-box-user-online">
                <div className="do-user-status-select">
                      { statusToggle}
                      <ReactCSSTransitionGroup transitionName="example">
                       {dropdownMenu}
                      </ReactCSSTransitionGroup>
                </div>
            </div>
		</div>
		<div className="icon-line" ></div>
		<div className="do-box-user-status">
			<div className="do-box-user-table">
				<p className="do-box-user-number">99+</p>
				<p className="do-box-user-detail">待解决</p>
			</div>
			<div className="do-box-user-table">
				<p className="do-box-user-number">99+</p>
				<p className="do-box-user-detail">解决中</p>
			</div>
		</div>
	</div>
/* jshint ignore:end */
    );
  }
});

module.exports =UserinfoComponent;